import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaTools, WeaLocaleProvider, WeaRightMenu, WeaNewScroll, WeaDialog, WeaSelect, WeaInput, WeaDatePicker, WeaTimePicker, WeaBrowser } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
import { WeaTableNew, WeaSwitch } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import { InputNumber } from 'antd';

@observer
export default class HighSeasConditionTarget extends React.Component {
  constructor(props) {
    super(props);
  }

  delHtmlTag(str) { // //去掉所有的html标记
    return str.replace(/<[^>]+>/g, '');
  }

  /**
	 * 当值改变时，存入store
	 * @param value
	 */
  changeFieldValue(value, valueSpan) {
    const { store, ctype } = this.props;
    let fieldid = '';
    if (valueSpan && valueSpan != '') {
      valueSpan = this.delHtmlTag(valueSpan);
    }
    if (ctype == 'top') {
      const { fieldRecord } = store;
      fieldid = fieldRecord.fieldid;
      store.targetValue = value;
      store.targetValueSpan = valueSpan || '';
      store.isChange = true;
    } else if (ctype == 'edit') {
      const { itemdata } = this.props;
      fieldid = itemdata.fieldid;
      itemdata.fieldvalue = value;
      itemdata.fieldtext = valueSpan || valueSpan;
    }
    if (value == '') {
      $(`#num_${ctype}${fieldid}`).removeClass('hide');
    } else {
      $(`#num_${ctype}${fieldid}`).addClass('hide');
    }
  }


    getComs = () => {
      const { store, ctype } = this.props;
      const { itemdata } = this.props;
      const { fieldRecord, conditionField, targetValue, targetValueSpan, conditionInfo } = store;
      let obj = {};
      let value = '';
      let valueSpan = '';
      if (ctype == 'top') {
        obj = fieldRecord;
        value = targetValue;
        valueSpan = targetValueSpan;
      } else if (ctype == 'edit') {
        const { fieldvalue, fieldtext, htmltype, fieldtype, fieldid } = itemdata;
        let qfws = 0;
        const { fieldOptions } = conditionInfo;
        for (let i = 0; i < fieldOptions.length; i++) {
          if (fieldid == fieldOptions[i].fieldid) {
            qfws = fieldOptions[i].qfws;
            break;
          }
        }
        value = fieldvalue;
        valueSpan = fieldtext;
        obj = {
          fieldhtmltype: htmltype,
          type: fieldtype,
          fieldid,
          qfws,
        };
      }
      let { fieldhtmltype, type, fieldid, qfws } = obj;
      if (fieldhtmltype == 1) {
        if (type == 1) {
          return (
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@wvo3ao`} viewAttr={2} value={value} onChange={(value) => { this.changeFieldValue(value); }} />
          );
        } else if (type == 2) {
          let css = '';
          if (value != '') {
            css = ' hide';
          }
          return (
            <div className="wev-crm-highseas-number-field">
              <InputNumber
                ecId={`${this && this.props && this.props.ecId || ''}_InputNumber@7trazo`}
                name="fieldInputInt"
                defaultValue={value}
                style={{ width: '100%' }}
                // formatter={(value) => { if(!isNaN(value)&&`${value}`.indexOf(".")!=-1){value = parseInt(value);} this.changeFieldValue(value); return `${value}`}}
                precision={0}
                viewAttr={2}
                onChange={(value) => { this.changeFieldValue(value); }}
              />
              {/* <div id={"num_"+ctype+fieldid} className={"item-img"+css}>
								<img src='/images/BacoError_wev9.png' />
						</div> */}
            </div>
          );
        } else if (type == 3 || type == 4 || type == 5) {
          if (qfws == '' || qfws <= 0) {
            qfws = 2;
          }
          let css = '';
          if (value != '') {
            css = ' hide';
          }
          return (
            <div className="wev-crm-highseas-number-field">
              <InputNumber
                ecId={`${this && this.props && this.props.ecId || ''}_InputNumber@4857xh`}
                name="fieldInputFloat"
                defaultValue={value}
                style={{ width: '100%' }}
                precision={qfws}
                // formatter={(value) => {this.changeFieldValue(value); return `${value}`}}
                onChange={(value) => { this.changeFieldValue(value); }}
              />
              {/* <div id={"num_"+ctype+fieldid} className={"item-img"+css}>
								<img src='/images/BacoError_wev9.png' />
						</div> */}

            </div>
          );
        }
      } if (fieldhtmltype == 2) {
        return (
          <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@j1edw6`} value={value} viewAttr={2} onChange={(value) => { this.changeFieldValue(value); }} />
        );
      } else if (fieldhtmltype == 3) {
        if (type == 2) {
          return (
            <WeaDatePicker
              ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@h85zpb`}
              value={value}
              viewAttr={2}
              onChange={(value) => { this.changeFieldValue(value); }}
            />
          );
        } else if (type == 19) {
          return (
            <WeaTimePicker
              ecId={`${this && this.props && this.props.ecId || ''}_WeaTimePicker@l68xa0`}
              value={value}
              viewAttr={2}
              onChange={(value) => { this.changeFieldValue(value); }}
            />
          );
        }
        const { browserOption } = conditionField;
        if (!browserOption) {
          return <div />;
        }
        const option = browserOption[`browser_${fieldid}`];
        const { browserConditionParam } = option;
        const valArr = [];
        if (value != '' && valueSpan != '') {
          const values = value.split(',');
          const names = valueSpan.split(',');
          if (values.length == names.length) {
            for (let i = 0; i < values.length; i++) {
              valArr.push({
                id: values[i],
                name: names[i],
              });
            }
          }
        }
        return (
          <WeaBrowser
            ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@am61k4`}
            key={new Date().getTime()}
            {...browserConditionParam}
            replaceDatas={valArr}
            viewAttr={2}
            onChange={(ids, names) => { this.changeFieldValue(ids, names); }}
          />
        );
      } else if (fieldhtmltype == 4) {
        const arr = [{
          key: '0',
          showname: '否',
        }, {
          key: '1',
          showname: '是',
        }, {
          key: 'null',
          showname: '空',
        }];
        const m = { 0: '否', 1: '是', null: '空' };
        return (
          <WeaSelect
            ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@iyevv4`}
            style={{ width: 200 }}
            options={toJS(arr)}
            value={value}
            viewAttr={2}
            onChange={(value) => { this.changeFieldValue(value, m[value]); }}
          />
        );
      } else if (fieldhtmltype == 5) {
        const { selectOption } = conditionField;
        if (!selectOption) {
          return <div />;
        }
        let arr = [];
        if (selectOption[`option_${fieldid}`]) {
          arr = selectOption[`option_${fieldid}`];
        }
        return (
          <WeaSelect
            ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@3gfg5q`}
            style={{ width: 200 }}
            options={toJS(arr)}
            value={value}
            viewAttr={2}
            onChange={(value) => { this.changeFieldValue(value); }}
          />
        );
      }
      return <div />;
    }

    render() {
      return this.getComs();
    }
}
